<template>
  <view class="page">
    <Navbar
      left-text="个人中心"
      :auto-back="false"
      left-icon=" "
      title=" "
      scroll-top="200"
    />
    <view
      class="user-top"
      :style="{
        height: userInfo.isPlus ? '526rpx' : '286rpx',
      }"
    />
    <view class="member-card" v-if="userInfo.isPlus" @click="handleToPlus">
      <view class="m-card">
        <u-image
          show-loading
          :show-menu-by-longpress="false"
          :src="userInfo.memberImg"
          width="100%"
          height="330rpx"
          radius="10"
        />
      </view>
      <view class="m-row">
        <view>
          <u-icon
            :name="require('@/static/my/gold.png')"
            size="32rpx"
            label="虚拟币"
            space="10rpx"
            label-color="#7d7f8c"
            label-size="40rpx"
          />
          <u-count-to
            :end-val="userInfo.virtual_coin"
            separator=","
            decimals="2"
            color="#7d7f8c"
          />
        </view>
      </view>
      <view class="l-row">{{ userInfo.memberName }}</view>
      <view class="t-row">
        有效期
        {{
          userInfo.member_expire_time == -1
            ? "永久"
            : $TimeFormat(userInfo.member_expire_time * 1000, "yyyy.mm.dd")
        }}
      </view>
    </view>
    <view class="header">
      <u-avatar :src="userInfo.avatar" size="60" @click="preImage" />
      <view class="info" v-if="isLogin">
        <u-text
          :text="userInfo.nickname || '微信用户'"
          bold
          lines="1"
          color="#000"
          size="36rpx"
          lineHeight="50rpx"
        />
        <u-text
          text="欢迎来到丘山阅...."
          color="#979797"
          size="28rpx"
          lineHeight="40rpx"
        />
      </view>
      <view v-else @click="confirmAuth" class="login-btn">登录</view>
      <view class="edit-btn" v-if="isLogin" @click="handleEdit">
        <u-text
          prefixIcon="edit-pen"
          iconStyle="font-size: 36rpx; color: #fff"
          size="28rpx"
          color="#fff"
          text="编辑"
        />
      </view>
    </view>
    <view class="function">
      <u-grid :border="false" col="4">
        <u-grid-item v-for="i in menuList" :key="i.id" @click="handleFunc(i)">
          <view style="margin: 40rpx 0 20rpx 0">
            <u-image
              show-loading
              :show-menu-by-longpress="false"
              :src="i.icon"
              width="72rpx"
              height="72rpx"
            />
          </view>
          <text>{{ i.label }}</text>
        </u-grid-item>
      </u-grid>
    </view>
    <view class="logout" v-if="isLogin" @click="handleLogout">退出登录</view>
  </view>
</template>

<script>
import Navbar from "@/components/Navbar/index";
import { myMemberCard, myRefreshInfo } from "@/request/myApi.js";
export default {
  components: { Navbar },
  data() {
    return {
      userInfo: {}, // 用户信息
      menus: [
        // 功能菜单
        {
          id: 1,
          label: "我的订单",
          needAuth: true,
          icon: require("@/static/my/func1.png"),
          url: "/pages/my/myOrder",
        },
        {
          id: 2,
          label: "我的卡券",
          needAuth: true,
          icon: require("@/static/my/func2.png"),
          url: "/pages/my/myCoupon",
        },
        {
          id: 3,
          label: "客服服务",
          needAuth: false,
          icon: require("@/static/my/func3.png"),
          url: "/pages/my/service",
        },
        {
          id: 4,
          label: "收货地址",
          needAuth: true,
          icon: require("@/static/my/func4.png"),
          url: "/pages/my/address",
        },
        {
          id: 5,
          label: "会员权益",
          needAuth: true,
          icon: require("@/static/my/func5.png"),
          url: "/pages/my/memberPlus",
        },
        {
          id: 6,
          label: "会员虚拟币",
          needAuth: true,
          icon: require("@/static/my/func6.png"),
          url: "/pages/my/coin",
        },
        {
          id: 7,
          label: "关于我们",
          needAuth: false,
          icon: require("@/static/my/func7.png"),
          url: "/pages/parse/index?type=platform",
        },
        // {
        //   id: 8,
        //   label: "优惠券",
        //   needAuth: true,
        //   icon: require("@/static/my/func8.png"),
        //   url: "/pages/my/coupon",
        // },
      ],
    };
  },
  computed: {
    // 是否登录
    isLogin() {
      return this.userInfo && this.userInfo.token ? true : false;
    },
    // 过滤菜单
    menuList() {
      let list = [];
      if (!this.userInfo.isPlus) {
        list = this.menus.filter((i) => i.id != 6);
      } else {
        list = this.menus;
      }
      return list;
    },
  },
  mounted() {
    this.getMemberList();
    this.handleRefresh();
  },
  onPullDownRefresh() {
    this.getMemberList();
    this.handleRefresh(true);
  },
  // 监听页面滚动
  onPageScroll(scroll) {
    uni.$emit("onPageScroll", scroll.scrollTop);
  },
  onShow() {
    this.handleRefresh();
  },
  methods: {
    // 功能跳转
    handleFunc(val) {
      if (val.url) {
        if (val.needAuth) {
          this.$author(() => {
            uni.navigateTo({ url: val.url });
          });
        } else {
          uni.navigateTo({ url: val.url });
        }
      }
    },
    // 跳转会员购买
    handleToPlus() {
      uni.navigateTo({ url: `/pages/my/memberPlus?id=${this.userInfo.memberId}` });
    },
    // 编辑资料
    handleEdit() {
      uni.navigateTo({ url: "/pages/my/userInfo" });
    },
    // 更新用户信息
    handleRefresh(v) {
      myRefreshInfo()
        .then((res) => {
          if (res.code == 1) {
            if (v) {
              uni.showToast({
                title: "刷新成功",
                icon: "success",
              });
            }
            this.userInfo = res.data.userinfo;
            // 会员信息
            let member = this.cardList.find((i) => i.id == this.userInfo.level);
            if (
              member &&
              (this.userInfo.member_expire_time == -1 ||
                this.userInfo.member_expire_time > new Date().getTime() / 1000)
            ) {
              this.userInfo.isPlus = true;
              this.userInfo.memberImg = member.cover_img;
              this.userInfo.memberId = member.id;
              this.userInfo.memberName = member.name;
              this.userInfo.memberRebate = member.rebate;
            }
            uni.setStorageSync("USER_INFO", JSON.stringify(this.userInfo));
            uni.setStorageSync("TOKEN", res.data.userinfo.token);
          }
        })
        .finally(() => {
          uni.stopPullDownRefresh();
        });
    },
    // 获取会员信息
    getMemberList() {
      myMemberCard().then((res) => {
        if (res.code == 1) {
          res.data.forEach((i) => {
            i.cover_img = i.cover_img || this.webSrc("/assets/web_img/my/member1.png");
          });
          this.cardList = res.data;
        }
      });
    },
    // 预览头像
    preImage() {
      uni.previewImage({
        urls: [this.userInfo.avatar],
      });
    },
    // 去登录
    confirmAuth() {
      uni.navigateTo({ url: "/pages/bind/login" });
    },
    // 退出登录
    handleLogout() {
      uni.showModal({
        title: "提示",
        content: "确定要退出登录吗？",
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync("USER_INFO");
            uni.removeStorageSync("TOKEN");
            this.userInfo = {};
            uni.showToast({
              title: "已退出",
              icon: "success",
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  position: relative;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  .user-top {
    width: 100%;
    background: linear-gradient(180deg, $active-color 0%, #3ba19900 100%);
    transition: height 0.5s;
  }
  .member-card {
    width: 750rpx;
    height: 330rpx;
    position: absolute;
    left: 0;
    top: 200rpx;
    .m-card {
      width: 710rpx;
      margin: 0 20rpx;
    }
    .m-row {
      position: absolute;
      right: 50rpx;
      bottom: 120rpx;
      display: flex;
      color: #fff;
      font-size: 36rpx;
      line-height: 50rpx;
      text-align: center;
      text-shadow: 1rpx 0 0 #7d7f8c;
    }
    .l-row {
      font-family: "FZLanTingHeiS-B-GB";
      position: absolute;
      left: 62rpx;
      font-weight: 600;
      bottom: 80rpx;
      color: #7d7f8c;
    }
    .t-row {
      position: absolute;
      left: 62rpx;
      bottom: 20rpx;
      font-family: "PingFang HK";
      font-size: 20rpx;
      line-height: 28rpx;
      color: #b1b0b8;
    }
  }
  .header {
    position: relative;
    margin-top: 20rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    padding: 20rpx;
    border-bottom: 1rpx solid #d9d9d999;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .info {
      width: 50%;
      display: flex;
      height: 120rpx;
      flex-direction: column;
      margin-left: 20rpx;
      justify-content: space-between;
    }
    .edit-btn {
      position: absolute;
      padding: 10rpx 36rpx;
      background-color: #b2afc0;
      top: 36rpx;
      right: -20rpx;
      border-radius: 28rpx 0 0 28rpx;
      &:active {
        background-color: #a6a6b0;
      }
    }
    .login-btn {
      color: #555;
      font-size: 28rpx;
      margin: 0 30rpx;
      border: none;
      background: transparent;
    }
  }
  .function {
    padding: 20rpx;
    font-size: 28rpx;
    color: #555555;
  }
  .logout {
    position: fixed;
    bottom: 30rpx;
    line-height: 80rpx;
    height: 80rpx;
    text-align: center;
    border-radius: 50rpx;
    background-color: $active-color;
    color: #fff;
    font-size: 28rpx;
    left: 100rpx;
    right: 100rpx;
    &:active {
      background-color: darken($active-color, 10%);
    }
  }
}
</style>
